<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
<!-- 搭建一个简单的vue项目 -->
<!-- 
1.会使用到npm安装,但是国内的npm安装一般比较慢,所以推荐使用淘宝的镜像
2.命令:npm install -g cnpm --registry=https://registry.npm.taobao.org
3.可以输入 cnpm -v 查看是否安装成功
4.安装成功之后 开始安装vue
5.命令:cnpm install -g vue-cli
6.可以输入 vue检查是否安装成功(这个时候vue就变成了一个命令)
7.安装成功之后,通过webpack下载vue模板
8.下载命令:vue init webpack my-first    //my-first是项目名字
9.一直回车一直回车,然后你就会发现你的文件夹下,有一个my-first的文件夹
10.cd 到my-first
11.安装npm install
12.安装之后可以就可以跑一下了命令为:npm run dev
13.会出现8080的端口号,这个时候用浏览器打开localhost:8080
14.我们的这个项目就搭建成功了
 -->
<!-- vue.js组件的重要选项 -->
<!-- 
1.new Vue({
	//数据
	data:{
		a:1,
		b:[]
	},
	//方法
	methods:{
		doSomething:function(){
			this.a++
		}
	}
	//监听事件,监听a的变化,输入2,1
	watch:{
		'a':function(val,oldVal){
			console.log(val,oldVal)
		}
	}
})
2.模板指令,常用的数据渲染三个方法
<p>{{a}}</p>
<p v-text='a'></p>  //格式经过处理
<p v-html='a'></p>  //格式未经过处理,直接保存了a的结构
3.模板指令,v-if v-show,都是控制这个元素的显示和隐藏
<p v-if='isShow'></p>   //经过判断,不符合元素时不加载,在代码里看不到这个元素
<p v-show='isShow'></p>  //通过css实现隐藏在代码里能看到这个元素
4.模板指令 v-for循环渲染
<ul>
	<li v-for='item in items'>
		<p v-text='item.label'></p>
	</li>
</ul>
data:{
	items:[
		{
			label:'apple'
		},
		{
			label:'banana'
		}
	]
}
5.v-on 事件绑定
<button v-on:click='doThis'></button>
<button @click='doThis'></button>  //v-on简写的方式
methods:{   //不能再用data了,data只是针对固定的一些数据或者是可以操作的数据,methods是方法
	doThis:function(someThing){}
}
6.属性绑定v-bind,对属性的一些操作,:class是他的简写
<img v-bind:src="imageSrc">
<div :class="{red:isRed}"></div>
<div :class="[classA,classB]"></div>
<div :class="[classA,{classB:isB,classC:isC}]"></div>
{}里面的键值对,是布尔值,像classA是字符串
-->
</body>
</html>